<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>
        <a href="/">系统管理</a>
      </el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="maincontent">
      <div class="content_title">用户管理</div>
      <div class="searchbox">
        <el-form :label-width="labelWidth" :model="searchObj" class="demo-form-inline" size="small">
          <el-row :gutter="24">
            <el-col :span="8">
              <el-form-item label="用户名">
                <el-input v-model="searchObj.username" placeholder="用户名"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="密码">
                <el-input v-model="searchObj.password" placeholder="密码"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <div class="searchbox_center">
            <el-button size="small" @click="onRest">重置</el-button>
            <el-button size="small" type="primary" @click="onSearch">查询</el-button>
          </div>
        </el-form>
      </div>
      <div class="tablebox">
        <el-table :data="dataList" border style="width: 100%" size="small" v-loading="loading">
          <el-table-column type="index" label="序号" width="70" align="center"></el-table-column>
          <el-table-column prop="username" label="姓名" width="180"></el-table-column>
          <el-table-column prop="password" label="密码"></el-table-column>
          <el-table-column prop="password" label="操作" width="120px" align="center">
            <template slot-scope="scope">
              <span class="tdsp"><a href="javascript:;" @click="delItem(scope.row)">删除</a></span>
              <span><a href="javascript:;" @click="editItem(scope.row)">编辑</a></span>
            </template>
          </el-table-column>
        </el-table>
        <div class="paginationbox">
          <el-pagination
            background
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pagination.pageNum"
            :total="pagination.total"
          ></el-pagination>
        </div>
      </div>
    </div>
    <editDialog :editDialog="editDialog" v-if="editDialog.show" @editSuccess="getEditSuccess"></editDialog>
  </div>
</template>
<script>
import api from "@/api";
import editDialog from './editDialog'
export default {
  components:{
    editDialog
  },
  data() {
    return {
      searchObj: {},
      searchObjTemp: {},
      labelWidth: "140px",
      userList: [],
      dataList: [],
      loading: false,
      pagination: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      editDialog:{
        show:false,
        data:{}
      }
    };
  },
  created() {
    this.getDataList()

  },
  methods: {

    //获取数据列表
    getDataList() {
      var obj = {
        pageNum: this.pagination.pageNum,
        pageSize: this.pagination.pageSize
      };
      var sendObj = Object.assign(obj, this.searchObjTemp);
      this.loading=true
      api
        .getUserList(sendObj)
        .then(res => {
          this.loading=false
          if (res.code === 200) {
            console.log("返回数据", res.data);
            this.dataList = res.data;
            this.pagination.total = res.total;
            this.pagination.pageNum=res.pageNum
            this.pagination.pageSize=res.pageSize
          } else {
            this.$alert(res.msg, "提示", {
              confirmButtonText: "确定",
              type:'warning'
            });
          }
        })
        .catch(err => {
          this.loading=false
          this.$alert(err, "系统错误", {
            confirmButtonText: "确定",
            type:'error'
          });
        });
    },

    onSearch() {
      this.pagination.pageNum=1
      console.log("查询");
      this.searchObjTemp = JSON.parse(JSON.stringify(this.searchObj));
      this.getDataList();
    },

    //重置
    onRest() {
      this.searchObj = {};
      this.searchObjTemp = {};
      this.getDataList();
    },

    handleSizeChange(val) {
      console.log(val);
      this.pagination.pageNum = 1;
      this.pagination.pageSize = val;
      this.getDataList();
    },

    handleCurrentChange(val) {
      console.log(val);
      this.pagination.pageNum = val;
      this.getDataList();
    },

    //删除
    delItem(item){
      console.log(item)
      this.$confirm('确定删除该用户吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.confirmDel(item)
        }).catch(() => {
          console.log('取消')       
        });
    },

    confirmDel(item){
      console.log('确定删除',item)
      var obj={
        id:item.id
      }
      api.delUser(obj)
      .then(res=>{
        if(res.code===200){
          this.$message.success('删除成功！')
          this.getDataList()
        }else{
          this.$alert(res.msg, "提示", {
              confirmButtonText: "确定",
              type:'warning'
            });

        }
      })
      .catch(err => {
          this.loading=false
          this.$alert(err, "系统错误", {
            confirmButtonText: "确定",
            type:'error'
          });
        });

    },

    //编辑
    editItem(item){
      console.log(item)
      this.editDialog.show=true
      this.editDialog.data=JSON.parse(JSON.stringify(item))
    },

    //编辑成功刷新数据
    getEditSuccess(){
      this.getDataList()
    }
  }
};
</script>
